<template>
	<view class="content">
		<view class="ListGroup">
			<view class="topView">
				<view class="lab1">服务评价</view>
			</view>
			<view class="empty" v-if="goodList.length == 0">
				<image class="empty-img" src="../../static/default_market_none.png"></image>
				<view class="empty-text">暂无没有评价！</view>
			</view>
			<view v-else class="goodList">
				<view class="vailable" v-for="(sonItem, sonIndex) in goodList" :key="sonIndex">
		            <view class="star">
		            	<view class="starText">商品评价</view>
		            	<uni-rate :value="sonItem.goodsStar" activeColor="#5360FF" readonly :size="20" :margin="5" style="height:-5upx;margin-left: 10upx;" />
		            </view>
		            <view class="star">
		            	<view class="starText">物流评价</view>
		            	<uni-rate :value="sonItem.logisticStar" activeColor="#5360FF" readonly :size="20" :margin="5" style="height:-5upx;margin-left: 10upx;" />
		            </view>
		            <view class="star">
		            	<view class="starText">服务评价</view>
		            	<uni-rate :value="sonItem.serviceStar" activeColor="#5360FF" readonly  :size="20" :margin="5" style="height:-5upx;margin-left: 10upx;" />
		            </view>
		            <view class="uni-textarea">服务感受  {{sonItem.evaContent}}</view>
		            <view class="invisible" >
						<uni-icons type="navigate" color="#1E90FF" size="20"></uni-icons>
		            	匿名评价
		            </view>
					<!-- v-if="invisible == 1" -->
					<view class="star">
		            	<view class="starText">提交时间</view>
		            	<view class="showTime">{{sonItem.createTime}}</view>
		            </view>
			    </view>
		    </view>
	    </view>
	</view>
</template>

<script>
	
	import {viewEva} from '../../api/index.js'
	export default {
		data() {
			return {
				
				
				userId:undefined,
				
				isRefresh:true,
				goodList:[],
				stuId:''
				
			}
		},
		
		onLoad(options) {
			this.userId = getApp().globalData.userId
			if (options.orderCode) {
			this.orderCode = options.orderCode
			this.clickSubmit();
			}
		},
		onPullDownRefresh() {
			
		},
		methods: {
			
			//评论列表
			async clickSubmit() {
			
				let {result} = await viewEva({userId:this.userId,orderCode:this.orderCode})
			    this.goodList = result
			}  
		}
	
	}
</script>

<style lang="less">
	
	page{
		background-color: #f2f2f2;
		height: 100%;
	}
	
    .content{
	 
		// background-color:#F6F6F6;
		padding: 20rpx 20rpx 200rpx;
		
		.ListGroup{
			
			background-color: #fff;
			border-radius: 20rpx;
			padding:30rpx;
			padding-bottom: 40rpx;
			
			.topView{
				
				height: 90rpx;
				font-size: 30rpx;
				line-height: 90rpx;
				margin:0 10rpx;
				border-bottom:  1rpx solid #f2f2f2;
				
				.lab1{
					font-size: 34rpx;
					color: #333;
					border-left: 10rpx solid #FFA500;
					padding-left: 10rpx;
					height: 52rpx;
					line-height: 52rpx;
				}
				.lab2{
					color: #ccc;
					font-size:28rpx;
					
					.uni-icon{
						margin-right: 15rpx;
						position: relative;
						top: 7rpx;
					}
				}
			}
			.goodList{
				padding-bottom: 30rpx;
			    border-bottom: thin solid #f2f2f2;
				.star{
					 margin-top: 25upx;
					 display: flex;
					 flex-direction: row;
					 align-items: center;
					 height: 50upx;
					 .starText {
						 height: 50upx;
						 font-size: 30upx;
						 font-weight: bold;
						 color: #333333;
						 line-height: 50upx;
						 margin-right: 16rpx;
						 }
					 .showTime{
						color: #666;
						font-size: 28upx;
					 }
				
				 }
				 .invisible{
					 margin-top: 20rpx;
					 color: #333333;
					 font-size: 30upx;
					 margin-left: 10rpx;
					 .uni-icons{
						 position: relative;
						 left: -10rpx;
						 top: 5rpx;
					 }
				 }
				 .uni-textarea{
					  color: #333333;
					  font-size: 30upx;
					  margin-top: 20rpx;
				 }
			}

		}
		
		.empty {
			
			
			margin-top: 40rpx;
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// background: #F4F4F4;
			padding-bottom: 30rpx;
		
			.empty-img {
				margin-top: 40upx;
				width: 100upx;
				height:100upx;
			}
		
			.empty-text {
				margin-top: 10upx;
				font-size: 26upx;
				color: #ccc;
				display: flex;
				align-items: center;
				.btnAddGood{
					color: #333333;
				}
			}
		
			.empty-btn {
				margin-top: 24upx;
				width: 250upx;
				height: 70upx;
				font-size: 26upx;
				color: #FFFFFF;
				background-color: #C24E4E;
			}
       }

	   

	   
}
</style>
